<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="" v-if="product.id">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item">
					<view class="image-wrapper">
						<image :src="product.image" class="loaded"  mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<text class="title">{{product.title}}</text>
			<view class="price-box bot-row">
				<text>桌号:{{product.number}}</text>
			</view>
		</view>

		<view class="detail-desc">
			<view class="font font-weight-bolder">预约时间</view>
			<view class="mt-3">
				<uv-tabs :list="dayTime" keyName = "dayStr" @click="click" 	
				lineColor=""
				lineHeight="0"
				:inactiveStyle="{
					padding:'10rpx 30rpx 10rpx 30rpx',
					backgroundColor:'#f8f9fa',
					borderRadius: '15rpx',
					transform: 'scale(1.05)'
				}"
				:activeStyle="{
					padding:'10rpx 30rpx 10rpx 30rpx',
					backgroundColor:'#ffcc00',
					borderRadius: '15rpx',
					color: '#ffffff',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"></uv-tabs>
			</view>
			<view class="flex flex-wrap">
				<view class="p-2" v-for="(item,i) in dayTime[index].timeRule" :key="i">
					<uv-button :custom-style="i == selectIndex? customStyle : checkStyle" :disabled="item.status == 1" type ="warning" :plain="true"  :text="item.tag+item.time + (item.status == 1 ? '已被预约' : '')" @click="selectDue(item,i)"></uv-button>
				</view>
			</view>
		</view>

		<!-- 底部操作菜单 -->
		<view class="fixed-bottom flex bg-white justify-between align-center m-auto due-btn">
			<text class="p-3">预约时间：<text class="text-warning">{{msg}}</text></text>
			<text class="p-3 bg-warning submit-btn" @click="confirm">立即预约</text>
		</view>

		<uv-toast ref="uToast" />
		<uv-popup ref="popup" mode="bottom" closeable="true" custom-style="height: 600rpx;">
			<view class="p-3">
				<view class="text-center mb-2">预约</view>
				<uv-form labelPosition="left"  ref="formRef" labelWidth="130rpx">
					<uv-form-item label="到店时间" borderBottom >
						<uv-input v-model="form.reachTime" border="none" placeholder="请输入到店时间" @focus="setShow()">
						</uv-input>
						<uv-datetime-picker ref="datetimePicker" v-model="value" mode="time" @confirm="confirm2" itemHeight="30">
						</uv-datetime-picker>
					</uv-form-item>
					<uv-form-item label="姓名" borderBottom >
						<uv-input v-model="form.realName"  placeholder="请输入姓名" border="none">
						</uv-input>
					</uv-form-item>
					<uv-form-item label="手机号" borderBottom>
						<uv-input v-model="form.userPhone" border="none" placeholder="请输入手机号">
						</uv-input>
					</uv-form-item>
					<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
				</uv-form>
			</view>
		</uv-popup>
	</view>
	<uv-loading-icon v-else></uv-loading-icon>
</template>

<script setup>
import {
  ref,
  computed,
  getCurrentInstance
} from 'vue'
import { onReachBottom,onLoad,onPullDownRefresh} from '@dcloudio/uni-app'
import {
  getDetail,
  createOrder
} from '@/api/due'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import cookie from '@/utils/cookie'
const main = useMainStore()
const { isLogin } = storeToRefs(main)
const { proxy } = getCurrentInstance();

const title = ref("预约详情")
const specClass = ref('none')
const product = ref({})
const form = ref( 
	{
		deskId: null,
		dueTime:null,
		reachTime: '',
		realName: '',
		userPhone: ''
	}
)
const dayTime = ref([
	{
		timeRule:[]
	}
])
const index = ref(0)

const customStyle = ref(
	{
			color: '#3c9cff',
			borderColor:'#3c9cff'
	}
)

const checkStyle = ref({})
const selectIndex = ref(-1)
const msg = ref('')
const popup = ref()
const formRef = ref()


onPullDownRefresh(() => {
	detail(id.value);
})

onLoad((options) => {
   detail(options.id);
   form.value.deskId = options.id
})

const datetimePicker = ref()
const setShow = () =>{
	datetimePicker.value.open()
}
const confirm = () => {
	popup.value.open()
}

const confirm2 = (e) =>{
	form.value.reachTime = e.value	
}

// 获取商品详情
const  detail = async(id) => {
	let data = await getDetail({
		deskId: id
	});
	uni.stopPullDownRefresh();
	product.value = data;
	dayTime.value = data.dayTime
}

const click = (e) => {
	index.value = e.index
	selectIndex.value = -1
}

const selectDue = (item,i) => {
	selectIndex.value = i
	
	msg.value = dayTime.value[index.value].dayStr + ' ' + item.time
	form.value.dueTime = item.timeDate
}

const submit = async() =>{
	if(!isLogin.value) {
		uni.navigateTo({url: '/pages/components/pages/login/login'})
	}
	if(!form.value.dueTime){
		uni.showToast({
			icon: 'error',
			title: '请选择预约时间'
		})
		return
	}
	
	
	if(form.value.reachTime == ''){
		uni.showToast({
			icon: 'error',
			title: '请选择到店时间'
		})
		
		return
	}

	if(form.value.realName == ''){
		uni.showToast({
			icon: 'error',
			title: '请填写名字'
		})
		
		return
	}
	
	if(form.value.userPhone == ''){
		uni.showToast({
			icon: 'error',
			title: '请填写电话'
		})
		return
	}
	let data = await createOrder(form.value)
	uni.navigateTo({
		url: '/pages/components/pages/orders/detail?id=' + data
	})
	
}





</script>

<style lang='scss'>
	.due-btn {
		width: 700rpx;
		border-radius: 50rpx;
		bottom: 20rpx;
		
		.submit-btn{
			 border-top-right-radius: 50rpx;
			 border-bottom-right-radius: 50rpx;
			 color: #ffffff;
		}
	}
	.icon-you {
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			font-size: 32upx;
			color: #555555;
			height: 50upx;
			line-height: 50upx;
			font-weight: bold;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 30rpx;
			color: #5A5B5C;
		}

		.price {
			font-size: 35rpx;
		}

		.bot-row {
			display: flex;
			align-items: center;

			text {
				flex: 1;
			}
		}
	}
	
	.btn {
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 100rpx;
		background: #ffcc00;
		font-size: 40rpx;
		color: #fff;
		margin: 30upx auto 20upx;
		
	
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		margin-bottom: 200rpx;
		padding: 20rpx;
	}


	

</style>
